<template>
    <div >
        <div class="box">
        <div class="wrap">
        <img :src="msg" alt="" class="img1">
        <img src="../../assets/image/orange.png" alt="" class="img2">
        <p class="p1"><input type="text" v-model="user.username" placeholder="请输入你的用户名"></p>
        <p class="p2"><input type="password" v-model="user.password" placeholder="请输入相应的密码"></p>
         <el-button type="primary" round @click="submit">登录</el-button>
        </div>  
        </div>      
    </div>
</template>

<script>
import {userlogin} from '../../request/api'
import { successAlert,warningAlert } from "../../util/alert"
import {mapActions} from 'vuex'
export default {
    data(){
        return{
            msg:require("../../assets/image/login.png"),
            user:{
                username:'',
                password:""
            }
        }
    },
    methods:{
        ...mapActions({
            reqchangeuser:'reqchangeuser'
        }),
        // 点击登录
        submit(){
            userlogin(this.user).then(res=>{
                console.log(res);
                if(res.data.code==200){
                    // 登录成功
                    successAlert(res.data.msg)
                    // 把用户信息保存在状态层
                    this.reqchangeuser(res.data.list)
                    // 跳转到首页
                    this.$router.push('/')
                }else{
                    // 登录失败
                    warningAlert(res.data.msg)
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
@import '../../less/color.less';
    .box{
        width: 100vw;
        height: 100vh;
        background: linear-gradient(@color1,@color2);        
    }
    .wrap{
        width: 600px;
        height: 400px;
        position: relative;
        position: fixed;
        right: 100px;
        top:100px;
        .p1{
            position: absolute;
            top: 220px;
            left: 300px;
            input{
                border: none;
                width: 250px;
                border-bottom: 1px solid @color1;
                background: none;
                outline: none;
            }
        }
        .p2{
            position: absolute;
            top: 260px;
            left: 300px;
            input{
                border: none;
                width: 250px;
                border-bottom: 1px solid @color1;
                background: none;
                outline: none;
            }
        }
        button{
            width: 250px;
            position: absolute;
            top: 310px;
            left: 300px;
        }
    };
    .wrap .img1{
        width: 600px;
        height: 400px;
    }
    .wrap .img2{
        width: 250px;
        height: 80px;
        position: absolute;
        top:80px;
        left:300px
    }

</style>